import sty from '@/style.module/editor/components/PaintingTool/index.module.scss';
import {Tabs} from '@arco-design/web-react';
import ScrollArea from 'react-scrollbar';
import StyleToolPanel from './StyleToolPanel';
import PagingToolPanel from './PagingToolPanel';
import AnimateToolPanel from './AnimateToolPanel';

export default function PaintingTool() {
    const [tabs] = useState([
        {title: '样式', key: 'style', content: <StyleToolPanel />},
        {title: '切页', key: 'paging', content: <PagingToolPanel />},
        {title: '动画', key: 'animate', content: <AnimateToolPanel />},
    ]);

    return (
        <div className={sty.container}>
            <Tabs
                defaultActiveTab='style'
                direction='horizontal'
                className={sty.tabs}
            >
                {tabs.map((tab) => (
                    <Tabs.TabPane destroyOnHide key={tab.key} title={tab.title}>
                        <ScrollArea
                            horizontal={true}
                            vertical={true}
                            className={sty.tabPaneScrollbar}
                        >
                            <div className={sty.tabPane}>{tab.content}</div>
                        </ScrollArea>
                    </Tabs.TabPane>
                ))}
            </Tabs>
        </div>
    );
}
